<!-- 模板 -->
<template>
  <view :class="{ avatar: true, 'show-y': showY }">
    <view class="a-img">
      <template v-if="props.type === 'user'">
        <aster-avatar :size="props.size" :src="props.src" />
      </template>
      <template v-else-if="props.type === 'dept'">
        <aster-avatar bgColor="#f78f5f" icon="iconfont icon-map-site" :size="props.size" />
      </template>
      <template v-else>
        <aster-avatar :size="props.size" :src="props.src" />
      </template>

      <i
        class="iconfont icon-delete"
        :style="{
          position: 'absolute',
          top: '-5px',
          right: '-5px',
          color: 'white',
          cursor: 'pointer',
          borderRadius: '50%',
          background: 'black',
        }"
        v-if="props.closeable"
        @click="close"
      ></i>
      <i :class="['status', statusIcon]" v-show="props.status"></i>
    </view>
    <view class="name" v-if="!props.showY && props.showName">{{ props.name }}</view>
    <aster-ellipsis
      hoverTip
      class="name"
      v-show="props.showName"
      :style="{ width: props.size + 'px' }"
      :content="props.name"
      v-else
    />
  </view>
</template>
<script setup lang="ts">
  import { computed } from 'vue';
  import AsterAvatar from '../common/aster-avatar.vue';
  import AsterEllipsis from '../common/aster-ellipsis.vue';

  const emits = defineEmits(['close']);
  const props = defineProps({
    type: {
      type: String,
      default: 'user',
    },
    name: {
      type: String,
      default: '未知',
    },
    size: {
      type: Number,
      default: 40,
    },
    src: {
      type: String,
      default: undefined,
    },
    bgc: {
      type: String,
      default: '#1989fa',
    },
    square: {
      type: Boolean,
      default: false,
    },
    showY: {
      type: Boolean,
      default: false,
    },
    showName: {
      type: Boolean,
      default: true,
    },
    closeable: {
      type: Boolean,
      default: false,
    },
    status: {
      type: String,
    },
  });

  const statusIcon = computed(() => {
    switch (props.status) {
      case 'error':
        return 'error iconfont icon-shenqingjujue';
      case 'pending':
        return 'pending iconfont icon-dengdaizhongbeifen';
      case 'success':
        return 'success iconfont icon-tongyihebingqingqiu';
      case 'cc':
        return 'send iconfont icon-zhifeiji';
      case 'comment':
        return 'comment iconfont icon-xiaoxi';
      case 'transfer':
        return 'transfer iconfont icon-zhuanyi';
      case 'cancel':
        return 'cancel iconfont icon-fanhui-chehui-06';
      case 'recall':
        return 'recall iconfont icon-quxiao';
      case 'leader':
        return 'leader iconfont icon-yonghu';
      default:
        return null;
    }
  });

  const close = () => {
    emits('close');
  };
</script>
<style scoped lang="scss">
  .show-y {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column !important;
    .name {
      margin-left: 0 !important;
    }
  }

  .close {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    background: black;
  }
  .avatar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .a-img {
      display: flex;
      border-radius: 50%;
      flex-direction: column;
      justify-content: center;
      background: white;
      position: relative;

      & > view {
        display: inline-block;
        text-align: center;
        background: var(--bgc);
        color: white;
        border-radius: 50%;
        width: var(--size);
        height: var(--size);
        line-height: var(--size);
        font-size: 14px;
      }
    }

    .name {
      text-align: center;
      color: #19191a;
      font-size: 14px;
      margin-left: 10px;
    }
  }

  .status {
    position: absolute;
    bottom: -4px;
    right: -8px;
    border-radius: 50%;
    font-size: 15px;
    background: white;
    border: 2px solid white;
  }

  .error {
    color: #f56c6c;
  }

  .leader {
    font-size: 12px;
    color: #f78f5f;
  }

  .pending {
    color: #f78f5f;
  }

  .success {
    color: #35b881;
  }

  .transfer {
    color: white;
    background: #7a939d;
    font-size: 12px;
    padding: 1px;
  }

  .comment {
    color: #1989fa;
  }

  .send {
    color: #1989fa;
  }

  .cc {
    color: white;
    font-size: 12px;
    padding: 1px;
    background: #1989fa;
  }

  .cancel {
    color: #838383;
  }

  .recall {
    color: #f56c6c;
  }
</style>
